import styles from "./index.module.css";
import PieChart from "../../component/echarts";
import { useNavigate } from "react-router-dom";
import request from "../../axios";
import { useEffect, useState } from "react";
import { InfiniteScroll, Skeleton } from "antd-mobile";
const His = () => {
  const navigate = useNavigate();
  const [pageNo, setPageNo] = useState(1);
  const [data, setData] = useState<any[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);

  const getDataList = async (page: number = 1) => {
    try {
      const { data } = await request.get("/meal_record/history/statistic", {
        pageNo: page,
        pageSize: 10,
      });
      if (data) {
        if (page === 1) {
          setData(data?.records || []);
        } else {
          setData((prev) => [...prev, ...(data?.records || [])]);
        }
        // 更新是否有更多数据
        setHasMore(
          data?.records?.length >= 10 && 100 > page * 10
        );
      }
    } catch (error) {}
  };

  // 加载更多数据
  const loadMore = async () => {
    await getDataList(pageNo);
    setPageNo((prev) => prev + 1);
  };

  // useEffect(() => {
  //   getDataList(1);
  // }, []);

  return (
    <div className={styles.tab}>
      <div className={styles.top}>历史记录</div>
      <div className={styles.center}>
        {data?.length > 0 ? data?.map((item: any) => {
          return (
            <div
              className={styles.item}
              onClick={() => {
                navigate(
                  `/his/detail?date=${item.date}&obj=${JSON.stringify(item)}`
                );
              }}
            >
              <span>{item?.date}</span>
              <div>
                <PieChart 
                  totalCount={item.totalCount}
                  excellentCount={item.aiRecognizedExcellentCount || 0}
                  goodCount={item.aiRecognizedGoodCount || 0}
                  passCount={item.aiRecognizedPassCount || 0}
                  failCount={item.aiRecognizedFailCount || 0}
                  waitCount={item.aiTodayUnrecognizedCount || 0}
                />
              </div>
            </div>
          );
        }) : <Skeleton.Paragraph lineCount={5} animated />}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  );
};

export default His;
